<template>
	<view>
		<view class="wrap_video" id="video" @click="showTop">
			<view class="videoConent">
				<view v-show="isShow" :style="{height:'100%',width:'100%'}" v-for="item in videoIdList" :key="item">
					<view :style="{height:'100%',width:'100%',position:'relative'}" :id="`remote_video_`+item">
						<view class="my-name u-line-1">{{teach_name}}</view>
					</view>
				</view>
				<view v-show="!isShow" class="_root" :style="{height:'100%',width:'100%'}"></view>
			</view>
			<view class="videoConent" id="local_stream">
				<view class="my-name u-line-1">{{my_name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		props:{
			videoIdList:{
				type:Array
			},
			isShow:{
				type:Boolean,
			},
			my_name:{
				type:String
			},
			teach_name:{
				type:String
			}
		},
		methods:{
			showTop(){
				this.$emit('showMeth','block')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap_video{
		height: 392rpx;
		width: 100%;
		display: flex;
		.videoConent{
			height: 100%;
			width: 50%;
			position: relative;
			
			.my-name{
				position: absolute;
				font-size: 22rpx;
				color: #FFFFFF;
				bottom: 0;
				height: 32rpx;
				line-height: 32rpx;
				text-indent: 15rpx;
				width: 100%;
				background: rgba(0, 0, 0,1);
				z-index: 10;
				opacity: 0.4;
			}
			._root{
				background-image: url(../../../static/images/course/cam_off.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
	}
</style>
